import { Component, toNative } from 'vue-facing-decorator'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import type { AnyObject } from '@/types'
import type { CompanyProcessDto } from '@/api/company/types'
import { getPeriodOccupationRecordList } from '@/api/occupationAudit'
import type { PeriodOccupationDto } from '@/api/occupationAudit/types'
import PreviewVideoDialog from '@/components/preview-media/PreviewVideoDialog'
import DialogAuditOccupation from './components/DialogAuditOccupation'
import { OccupationAuditStatusCnEnum } from '@/const/enum'
import DialogReject from './components/DialogReject'

@Component
export class PeriodView extends TableRender {
    curItem = {} as PeriodOccupationDto
    showDialog = false
    showReject = false

    filterConfig() {
        return {
            serveCompanyOrCompanyName: {
                name: '智能搜索',
                element: 'input',
                placeholder: '智能搜索派遣单位或客户产品名称'
            }
        } as FilterDto
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'operate',
                title: '操作',
                width: 120,
                fixed: 'left',
                params: {
                    buttons: [
                        {
                            text: '通过',
                            hidden: (row) => row.auditStatus !== OccupationAuditStatusCnEnum.待审核,
                            type: 'primary',
                            event: (row) => {
                                this.handleAudit(row)
                            }
                        },
                        {
                            text: '驳回',
                            hidden: (row) => row.auditStatus !== OccupationAuditStatusCnEnum.待审核,
                            event: (row) => {
                                this.handleReject(row)
                            }
                        }
                    ]
                },
                slots: {
                    default: 'buttons'
                }
            },
            {
                field: 'serveCompanyName',
                title: '派遣单位名称',
                width: 200,
                params: {
                    path: (row) => `/insurance-center/dispatching-company/${row.periodServeCompanyId}`,
                },
                slots: {
                    default: 'toNext'
                }
            },
            {
                field: 'companyName',
                title: '客户名称',
                width: 200,
                params: {
                    path: (row) => `/customer/${row.companyId}`,
                },
                slots: {
                    default: 'toNext'
                }
            },
            {
                field: 'fileUrls',
                title: '审核视频',
                formatter: ({ row }) => {
                    return row.fileUrls ? <PreviewVideoDialog src={row.fileUrls} /> : '--'
                }
            },
            {
                field: 'occupationNames',
                title: '审核工种',
                formatter: ({ row }) => {
                    return row.occupationNames ? row.occupationNames.join('、') : '--'
                }
            },
            {
                field: 'applyName',
                title: '申请人'
            },
            {
                field: 'createTime',
                title: '申请时间'
            }
        ] as TableRenderColumnTypes<PeriodOccupationDto>

    handleAudit(row: PeriodOccupationDto) {
        this.showDialog = true
        this.curItem = row
    }

    handleReject(row: PeriodOccupationDto) {
        this.showReject = true
        this.curItem = row
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getPeriodOccupationRecordList({
            pageSize: size,
            pageNum: page,
            ...filters
        })
    }

    render() {
        return <>
            {super.render()}
            <DialogAuditOccupation v-model:show={this.showDialog} id={this.curItem.id} periodServeCompanyId={this.curItem.periodServeCompanyId} onRefresh={this.reloadPage} />
            <DialogReject v-model:show={this.showReject} id={this.curItem.id} onRefresh={this.reloadPage} />
        </>
    }
}

export default toNative(PeriodView)
